<script lang="ts">
export default {
  route: { name: 'login', meta: { guest: true } }
};
</script>

<script lang="ts" setup>
import { ILoginData } from '@/apis/userApi';
import { useRouter } from 'vue-router';
import { login } from '@/utils/user';
import v from '@/plugins/validate';

const router = useRouter();
const { Form, Field, useForm } = v;
const schema = {
  account: { required: true, email: true },
  password: { required: true, min: 3 }
};
const { handleSubmit, errors, values } = useForm({
  initialValues: {
    account: '2300071698@qq.com',
    password: 'admin888'
  },
  validationSchema: schema
});
const onSubmit = handleSubmit(async (values: any) => {
  login(values);
});
// const onSubmit = async (values: ILoginData) => {
//   login(values);
// };
</script>
<template>
  <form @submit="onSubmit" :validation-schema="schema">
    <div class="form-wrap">
      <div class="p-6 flex flex-col justify-between">
        <div>
          <h2 class="text-center text-gray-700 text-lg">会员登录</h2>
          <div class="mt-8">
            <Field
              name="account"
              v-model="values.account"
              class="hd-input"
              label="账号"
              placeholder="请输入邮箱或手机号"
            />
            <div v-if="errors.account" class="hd-error">{{ errors.account }}</div>
            <Field name="password" v-model="values.password" class="hd-input mt-4" label="密码" />
            <div v-if="errors.password" class="hd-error">{{ errors.password }}</div>
          </div>
          <HdButton class="mt-3" />
          <div class="flex justify-center mt-2">
            <i class="fa fa-wechat weixin-icon"></i>
          </div>
        </div>
        <div class="flex gap-2 justify-center mt-2">
          <HdLink />
          <a href="#" class="text-sm text-gray-500">会员注册</a>
          <a href="#" class="text-sm text-gray-500">找回密码</a>
        </div>
      </div>
      <div class="hidden md:block relative">
        <img src="/images/login_bg.jpg" class="absolute h-full w-full object-cover" />
      </div>
    </div>
  </form>
</template>

<style lang="scss" scoped>
form {
  @apply bg-slate-200 h-screen flex justify-center items-start p-5 md:items-center p-0;
  .form-wrap {
    @apply w-[720px] bg-white md:grid grid-cols-2 rounded-md shadow-lg overflow-hidden translate-y-32 md:translate-y-0;
  }
}
.weixin-icon {
  @apply bg-green-400 text-white p-1 rounded-full cursor-pointer;
}
</style>
